<template>
  <div class="main-box">
    <formBuilder
      ref="formBuilderRef"
      :schema="(settingSchema as any)"
    ></formBuilder>
    <n-space justify="end">
      <n-button
        @click="handleSave"
        style="width: 120px"
        type="primary"
        secondary
        >保存</n-button
      >
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import formBuilder from "@/components/form-builder/index.vue";
import { updateDict } from "@/api/dict";
import { ref, onMounted } from "vue";
const formBuilderRef = ref();
import { useMainStore } from "@/store";
import { useMessage } from "naive-ui";
const message = useMessage();
const mainStore = useMainStore();
const settingSchema = ref({
  title: "用户",
  size: "medium",
  labelWidth: "auto",
  labelPlacement: "top",
  columns: [
    {
      name: "首页图标",
      type: "image-upload",
      prop: "siteImage",
    },
    {
      name: "站点名称",
      type: "text",
      prop: "siteName",
    },
  ],
});
const handleSave = () => {
  formBuilderRef.value.subimt().then((res) => {
    console.log(res);
    mainStore.siteInfo.name = res["siteName"];
    mainStore.siteInfo.logo = res["siteImage"];
    updateDict({ id: 32, value: mainStore.siteInfo.name });
    updateDict({ id: 31, value: mainStore.siteInfo.logo });
    message.success("修改成功");
  });
  // mainStore.siteInfo.name
};
onMounted(() => {
  formBuilderRef.value.setForm({
    siteName: mainStore.siteInfo.name,
    siteImage: mainStore.siteInfo.logo,
  });
});
</script>

<style lang="scss" scoped>
.main-box {
  max-width: 600px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 12px;
  text-align: left;
}
</style>
